<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="displayModuleTitle"
    @ok="onButtonOkClick"
    okText="统计"
    @cancel="onButtonClickCancel"
  >
    <a-card
      title="到报/缺失统计"
      size="small"
      style="border-color: #eaeaea; background-color: #fcfcfc"
      :headStyle="{ fontWeight: 600, fontSize: '15px' }"
    >
      <a-form :model="condition" style="padding: 0 5px" layout="inline" ref="formRefRate">
        <a-form-item :rules="[{ required: true }]" style="width: 100%; margin: 8px 0">
          是否统计：
          <a-radio-group v-model:value="condition.ratests">
            <a-radio :value="true">统计</a-radio>
            <a-radio :value="false">不统计</a-radio>
          </a-radio-group>
        </a-form-item>
        <template v-show="condition.ratests" style="display: flex; flex-wrap: wrap">
          <a-form-item
            :rules="[{ required: condition.ratests ? true : false, message: '请输入频率数值' }]"
            name="ratevalue"
            style="margin-right: 5px"
          >
            按照每
            <a-input-number
              v-model:value="condition.ratevalue"
              placeholder="频率数值"
              max="2000"
              size="small"
            />
          </a-form-item>
          <a-form-item
            :rules="[{ required: true, message: '请选择频率类型' }]"
            name="ratetype"
            style="margin-right: 0"
          >
            <a-select
              v-model:value="condition.ratetype"
              style="width: 80px"
              :options="rateTypeOptions"
              placeholder="频率类型"
              size="small"
            ></a-select>
            有一条数据统计，
          </a-form-item>
          <a-form-item
            :rules="[{ required: condition.ratests ? true : false, message: '请输入提前分钟数' }]"
            name="ratebefore"
            style="margin-right: 0"
          >
            数据时标最早提前
            <a-input-number
              v-model:value="condition.ratebefore"
              placeholder="提前分钟数"
              max="99"
              size="small"
            />
            分钟，
          </a-form-item>
          <a-form-item
            :rules="[{ required: condition.ratests ? true : false, message: '请输入延后分钟数' }]"
            name="rateafter"
            style="margin-right: 0"
          >
            最晚延后
            <a-input-number
              v-model:value="condition.rateafter"
              placeholder="延后分钟数"
              max="99"
              size="small"
            />
            分钟。
          </a-form-item>
          <div
            style="
              font-size: 13px;
              border-radius: 5px;
              padding: 7px;
              margin: 10px 0;
              background-color: #e4edff;
            "
          >
            注:数据时标在{{
              moment().startOf('day').subtract(condition.ratebefore, 'minutes').format('HH:mm')
            }}至{{
              moment().startOf('day').add(condition.rateafter, 'minutes').format('HH:mm')
            }}均可算作0:00的数据。
          </div>
        </template>
      </a-form>
    </a-card>
    <div style="width: 100%; height: 0.5px; background-color: #e9e9e9; margin: 15px 0"></div>
    <a-card
      title="畅通率统计"
      size="small"
      style="border-color: #eaeaea; background-color: #fcfcfc"
      :headStyle="{ fontWeight: 600, fontSize: '15px' }"
    >
      <a-form :model="condition" style="padding: 0 5px" layout="inline" ref="formRefOntime">
        <a-form-item :rules="[{ required: true }]" style="width: 100%; margin: 8px 0" name="ontime">
          是否统计：
          <a-radio-group v-model:value="condition.ontime" :disabled="!condition.ratests">
            <a-radio :value="true">统计</a-radio>
            <a-radio :value="false">不统计</a-radio>
          </a-radio-group>
        </a-form-item>
        <template v-show="condition.ontime" style="display: flex; flex-wrap: wrap">
          <div style="width: 100%; display: flex; flex-wrap: nowrap">
            <a-form-item
              :rules="[{ required: condition.ontime ? true : false, message: '请输入提前分钟数' }]"
              name="ontimebefore"
              style="margin-right: 0"
            >
              数据写入时间最早提前
              <a-input-number
                v-model:value="condition.ontimebefore"
                placeholder="提前分钟数"
                max="99"
                size="small"
              />
              分钟，
            </a-form-item>
            <a-form-item
              :rules="[{ required: condition.ontime ? true : false, message: '请输入延后分钟数' }]"
              name="ontimeafter"
              style="margin-right: 0"
            >
              最晚延后
              <a-input-number
                v-model:value="condition.ontimeafter"
                placeholder="延后分钟数"
                max="99"
                size="small"
              />
              分钟，均算作准点。
            </a-form-item>
          </div>

          <div
            style="
              font-size: 13px;
              border-radius: 5px;
              padding: 7px;
              margin: 10px 0;
              background-color: #e4edff;
            "
          >
            注:数据写入时间{{
              moment().startOf('day').subtract(condition.ontimebefore, 'minutes').format('HH:mm')
            }}至{{
              moment().startOf('day').add(condition.ontimeafter, 'minutes').format('HH:mm')
            }}均可算作0:00的准点数据。
          </div>
        </template>
      </a-form>
    </a-card>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref, computed, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { queryEnumOption } from '/@/api/qms/exchangeData';
  import { DataRecordStatisticsConditionDto } from '/@/api/qms/model/exchangeDataModel';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { displayTitle } from '/@/utils/QcUnifyUtil';
  import { Modal } from 'ant-design-vue';
  import moment from 'moment';
  import type { FormInstance } from 'ant-design-vue';

  export default defineComponent({
    name: 'condition',
    components: { BasicModal },
    emits: ['success', 'register'],
    props: {
      //   fontWeight: { default: '600' },
      //   fontSize: { default: '15px' },
    },
    setup(props, { emit }) {
      //频率类型
      const rateTypeOptions = ref([]);
      const formRefRate = ref<FormInstance>();
      const formRefOntime = ref<FormInstance>();
      //   console.log('SetStatisticsCondition.vue setup', props.propsCondition);
      //表单填写的统计条件
      const condition = ref({
        ratests: false,
        ratetype: 1,
        ontimeafter: 1,
        ontimebefore: 1,
        ontime: false,
        ratevalue: 0,
        rateafter: 0,
        ratebefore: 0,
      });

      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      /**
       * 根据父组件传递过来的参数获取对应的操作
       */
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        console.log('SetStatisticsCondition.vue useModalInner', data.condition);
        //接收父组件传递的数据
        let unrefData = unref(data);
        qcUnifyProps.value = unrefData;
        setModalProps({ confirmLoading: false, width: 620 });

        condition.value = { ...unrefData.condition };
        if (condition.value.ratetype == 0 || condition.value.ratevalue == 0)
          condition.value.ratests = false;
        else condition.value.ratests = true;
        // condition.value = unref(data.condition);
        //是否是第一次打开弹窗,是的话要把默认值赋值给表单
        // 获取日期枚举类
        queryEnumOption('TimeRangeLengthEnum').then((res) => {
          let Options = [];
          for (let i of res[0].options) {
            Options.push({ value: Number(i.key), label: i.value });
          }
          console.log(Options, 'op');
          rateTypeOptions.value = Options;
        });
      });
      /**
       * 点击确认按钮，调用对应方法
       */
      async function onButtonOkClick() {
        setModalProps({ confirmLoading: true });
        formRefRate.value
          .validate()
          .then(() => {
            formRefOntime.value
              .validate()
              .then(() => {
                let tmp = JSON.parse(JSON.stringify(condition.value));
                if (!tmp.ratests) {
                  tmp.ratevalue = 0;
                }
                emit('success', tmp);
                console.log(tmp, 'tmp');
                closeModal();
                setModalProps({ confirmLoading: false });
              })
              .catch((error) => {
                console.log('error', error);
              });
          })
          .catch((error) => {
            console.log('error', error);
          });
        setModalProps({ confirmLoading: false });
      }

      function onButtonClickCancel() {
        closeModal();
      }
      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });
      watch(
        () => condition.value.ratests,
        (newval) => {
          console.log(newval, 'newvl');
          if (!newval) condition.value.ontime = false;
        },
      );
      return {
        formRefRate,
        formRefOntime,
        rateTypeOptions,
        condition,
        displayModuleTitle,
        onButtonClickCancel,
        registerModal,
        setModalProps,
        onButtonOkClick,
        moment,
      };
    },
  });
</script>
